<template>
  <div class="page">
      <div class="head">
          <h5 class="text1"><i class="fa fa-comments"></i> 新消息</h5>
          <p class="text2">您收到的消息都在这里！</p>
      </div>
      <div class="content" ></div>
<!--      一整个信息模板-->
      <div  class="msg" v-for="(item, index) in datalist" :key="index">

          <div class="part">
              <div class="">

                 <div class="data" >
                    <img :src="item.eventer.image"/>
                     <p class="name" >{{item.eventer.nickname}}</p>
                     <p class="time" >{{item.time}}</p>
                 </div>
              </div>
              <p class="cmt" >{{item.comment }}</p>
          </div>

          <div class="part qst" >

              <div class="txt " >
                    {{item.question.owner.nickName}}：
                  <router-link to="/view_question" class="qst_ct">
                      <span v-html="item.question.questionContent"></span>
                  </router-link>

              </div>

          </div>
          <div class="part" >
                <form>
                    <input type="text" class="reply"  v-model="item.reply" placeholder="回复"/><br>
                    <div class="bt">
                        <el-button  plain @click="add(index,item .eventer.id,item .question.id,item.type)" >发送</el-button>
                        <el-button plain @click="dlt(item.id,index)" >删除</el-button>

                    </div>
                </form>
      </div>
      </div>
  </div>
</template>



<script>
    import {postJsonRequest} from "../utils/api";
    import { getRequest} from "../utils/api";

export default {
  name: 'Message',
  components: {},
    mounted() {
      //获取消息详细内容
        getRequest ("/content/details?id="+1)
            .then(resp=> {
                var _this=this
                    console.log(resp.data.msg);
                    console.log(resp.data.code);
                    _this.datalist =resp.data.data;
                     }).catch(err => {
             console.log("服务器异常");
         });

    } ,
    data() {

        return {
            datalist: [],
        }
  },
    methods:{
        //回复评论
      add(index,evt_id,qst_id,type){
          var _this = this;
          console.log(index);
          if(this.datalist[index].reply==""||this.datalist[index].reply==null||this.datalist[index].reply==undefined )
          {
              this.$message({
                  message: '请输入回复内容'
              });
          }
          else
          {
            postJsonRequest ("/content/save",
                            {eventerId:evt_id,
                                questionId:qst_id,
                                type:type,
                                content:_this.datalist[index].reply})
                .then(resp=> {
                    console.log(_this.datalist[index].reply);
                    console.log(resp.data.msg)
                    console.log(resp.data.code)
                    if(resp.data.code===0)
                    {
                        _this.datalist[index].reply="";
                        //console.log(_this.datalist[index].reply);
                   
                        this.$message({
                            showClose: true,
                            message: '发送成功',
                            type:'success'
                        });
                    }
                    else
                    {
                        this.$message({
                            showClose: true,
                            message: '发送失败',
                            type:'error'
                        });
                    }
                    
                });
          }
      },
        //删除评论
        dlt(comment_id) {
            this.$confirm('是否永久删除该评论?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //用户确认后，将评论删除
                var _this = this;
                postJsonRequest("/content/delete",
                                {id: comment_id})
                    .then(resp => {
                        console.log(resp.data.msg);
                        console.log(resp.data.code);
                        _this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        }
    }
}
</script>

<style scoped>
    .head {
        margin: 20px 0 25px;
        background-color: white;
        border: 1px solid transparent;
        border-radius: 3px;
        padding: 15px 15px 15px 15px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.12);
        text-align: left;
    }
    .text1 {
        font-size: 14px;
        font-weight: 400;
        color: black;
        margin: 0;
    }
    .text2 {
        font-size: 10px;
        color: #777777;
        margin: 0;
    }
    .msg{
        width: 100%;
        border-radius: 2px;
        background-color: white;
        box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.125);
        margin-bottom: 2px;
    }
    .part{
        padding: 10px;
    }
    img{
        display: inline;
        float: left;
        width: 45px;
        height: 45px;
    }
    .data{
        height: 45px;
        padding: 15px 5px;

    }
    p{
        margin: 0;
        padding: 0;
        text-align: left ;
    }
    .name{
        font-size: x-large;
    }
    .time{
        font-size: small;
    }
    .cmt{
        margin: 0 0 0 5px;
        padding:3px 0px;
        text-align: left ;
    }
    .qst{

        height: 80px;
        background-color: rgba(90, 123, 245, 0.08);
        text-align:left;
        margin: 10px;
        overflow:auto;

    }
    .qst_ct {
        text-decoration: none;
    }
    .txt{
        width: 100%;
        padding-top: 20px;
        line-height: 50px;
    }
    .reply {
        width: 100%;
        height: 25px;
        background-color: rgba(90, 123, 245, 0.08);
        text-align: left;
        border: 0;
    }


    .bt{
        padding: 5px  0;
        text-align: left ;
    }
</style>
